<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX题库 - 管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1F2937',
                        muted: '#6B7280',
                        'bg-light': '#F9FAFB',
                        'border-light': '#E5E7EB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'sidebar': '0 0 20px -5px rgba(0, 0, 0, 0.05)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.3s ease-in-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        }
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-30">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- 左侧logo和标题 -->
                <div class="flex items-center space-x-2">
                    <button id="sidebarToggle" class="lg:hidden p-2 rounded-md text-muted hover:bg-gray-100">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-graduation-cap"></i>
                        </div>
                        <h1 class="text-lg font-bold text-dark">XX题库管理系统</h1>
                    </div>
                </div>
                
                <!-- 右侧用户信息 -->
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <button class="p-2 rounded-full text-muted hover:bg-gray-100 relative">
                            <i class="fa fa-bell text-lg"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>
                    </div>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                        <span class="hidden md:inline text-sm font-medium text-dark">管理员</span>
                        <i class="fa fa-angle-down text-muted"></i>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏导航 -->
        <aside id="sidebar" class="w-64 bg-white shadow-sidebar h-[calc(100vh-4rem)] fixed left-0 top-16 bottom-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-20 overflow-y-auto scrollbar-hide">
            <div class="p-4">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-cog text-xl"></i>
                    </div>
                    <h2 class="text-lg font-bold text-dark">系统管理</h2>
                </div>
                
                <nav class="space-y-1">
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg sidebar-item-active">
                        <i class="fa fa-dashboard text-lg w-6 text-center"></i>
                        <span>数据仪表盘</span>
                    </a>
                    
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-muted hover:bg-gray-50">
                        <i class="fa fa-users text-lg w-6 text-center"></i>
                        <span>用户管理</span>
                    </a>
                    
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-muted hover:bg-gray-50">
                        <i class="fa fa-question-circle text-lg w-6 text-center"></i>
                        <span>题库管理</span>
                    </a>
                    
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-muted hover:bg-gray-50">
                        <i class="fa fa-graduation-cap text-lg w-6 text-center"></i>
                        <span>课程管理</span>
                    </a>
                    
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-muted hover:bg-gray-50">
                        <i class="fa fa-bar-chart text-lg w-6 text-center"></i>
                        <span>学习分析</span>
                    </a>
                    
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-muted hover:bg-gray-50">
                        <i class="fa fa-commenting text-lg w-6 text-center"></i>
                        <span>互动管理</span>
                    </a>
                    
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-muted hover:bg-gray-50">
                        <i class="fa fa-cog text-lg w-6 text-center"></i>
                        <span>系统设置</span>
                    </a>
                </nav>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 lg:ml-64 p-6 bg-gray-50 overflow-y-auto">
            <div class="container mx-auto">
                <!-- 页面标题 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">数据仪表盘</h2>
                    <p class="text-muted mt-1">查看系统整体运行情况和关键指标</p>
                </div>
                
                <!-- 数据概览卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <!-- 用户总数卡片 -->
                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">用户总数</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">12,846</h3>
                                <p class="text-secondary text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12.5% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-users text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 题目总数卡片 -->
                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">题目总数</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">58,921</h3>
                                <p class="text-secondary text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8.2% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                                <i class="fa fa-question-circle text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 今日学习卡片 -->
                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">今日学习</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">2,458</h3>
                                <p class="text-primary text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 3.1% 较昨日
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center text-accent">
                                <i class="fa fa-graduation-cap text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 完成率卡片 -->
                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">完成率</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">89.7%</h3>
                                <p class="text-secondary text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 5.3% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-check-circle text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <!-- 学习趋势图表 -->
                    <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2 card-hover">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-bold text-dark">学习趋势分析</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-lg">7天</button>
                                <button class="px-3 py-1 text-xs bg-gray-100 text-muted rounded-lg">30天</button>
                                <button class="px-3 py-1 text-xs bg-gray-100 text-muted rounded-lg">90天</button>
                            </div>
                        </div>
                        <div class="h-80">
                            <canvas id="learningTrendChart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 题型分布图表 -->
                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <h3 class="font-bold text-dark mb-6">题型分布</h3>
                        <div class="h-80 flex items-center justify-center">
                            <canvas id="questionTypeChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 最近学习记录 -->
                <div class="bg-white rounded-xl shadow-card p-6 mb-8 card-hover">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-bold text-dark">最近学习记录</h3>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-border-light">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">用户</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">学习内容</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">时长</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">完成率</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">时间</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-border-light">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img src="https://picsum.photos/id/237/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-dark">张三</div>
                                                <div class="text-xs text-muted">学生</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-dark">高中数学-函数</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-dark">45分钟</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm font-medium text-dark">85%</span>
                                            <div class="ml-2 w-16 h-2 bg-gray-200 rounded-full">
                                                <div class="h-2 bg-secondary rounded-full" style="width: 85%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
                                        今天 10:23
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-dark">李四</div>
                                                <div class="text-xs text-muted">学生</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-dark">初中英语-语法</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-dark">32分钟</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm font-medium text-dark">92%</span>
                                            <div class="ml-2 w-16 h-2 bg-gray-200 rounded-full">
                                                <div class="h-2 bg-secondary rounded-full" style="width: 92%"></div
